import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { KV, Row } from '@/components/ui/key-value';
import { Container, Note } from '@/components/ui/section';
import { api, ApiError } from '@/lib/api';
import { fmtDateTime, fmtInt } from '@/lib/format';
import { routes } from '@/lib/site';

export const revalidate = 3600;
export const metadata: Metadata = { title: 'Snapshot', robots: { index: false } };

export default async function SnapshotPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  let s;
  try {
    s = await api.snapshot(id);
  } catch (e) {
    if (e instanceof ApiError && e.notFound) notFound();
    throw e;
  }
  return (
    <Container>
      <div className="pb-4 pt-6 md:pt-10">
        <p className="eyebrow">Snapshot · version {s.version_no}</p>
        <h1 className="display mt-2 text-[24px] md:text-[32px]">{s.title ?? 'Normalised page version'}</h1>
        <p className="mt-2 text-sm text-ink-2">
          Fetched {fmtDateTime(s.fetched_at)} ·{' '}
          <Link href={routes.sensor(s.sensor_id)} className="link">
            sensor
          </Link>
          {s.previous_snapshot_id && (
            <>
              {' · '}
              <Link href={routes.snapshotDiff(s.previous_snapshot_id, s.id)} className="link">
                diff against previous version
              </Link>
            </>
          )}
        </p>
      </div>
      <div className="grid gap-8 lg:grid-cols-12">
        <article className="lg:col-span-8">
          <p className="eyebrow mb-2">Semantic blocks as observed</p>
          {s.blocks?.length ? (
            <ol className="space-y-2">
              {s.blocks.map((b) => (
                <li key={b.key} className="border-l-2 border-rule pl-3">
                  <p className="mono text-[10px] uppercase tracking-wider text-ink-3">
                    {b.kind} <span className="normal-case tracking-normal">· {b.path}</span>
                  </p>
                  <p className={`mt-0.5 text-sm ${b.kind === 'heading' ? 'font-semibold text-ink' : 'text-ink-2'}`}>{b.text}</p>
                </li>
              ))}
            </ol>
          ) : (
            <pre className="whitespace-pre-wrap border border-rule bg-surface-2 p-3 text-sm">{s.text}</pre>
          )}
        </article>
        <aside className="lg:col-span-4">
          <KV>
            <Row k="Language">{s.language ?? '—'}</Row>
            <Row k="Text length">
              <span className="tnum">{fmtInt(s.text_length)}</span>
            </Row>
            <Row k="Blocks">
              <span className="tnum">{fmtInt(s.block_count)}</span>
            </Row>
            <Row k="Content hash">
              <span className="mono text-xs break-all">{s.content_hash}</span>
            </Row>
            <Row k="Id">
              <span className="mono text-xs break-all">{s.id}</span>
            </Row>
          </KV>
          {Object.keys(s.extracted ?? {}).length > 0 && (
            <div className="mt-4">
              <p className="eyebrow mb-1">Extracted fields</p>
              <pre className="overflow-x-auto border border-rule bg-surface-2 p-3 text-xs">{JSON.stringify(s.extracted, null, 2)}</pre>
            </div>
          )}
          <Note className="mt-4">This is the normalised representation (scripts, styles, tracking parameters and rotating content removed). The raw object is kept in the content-addressed archive; identical pages share one object.</Note>
        </aside>
      </div>
    </Container>
  );
}